﻿
@{
    ViewBag.Title = "Portfolio";
}

<div id="content">
    <!-- #content -->
    <!-- SECTION START TOPBAR -->
    <section id="topbar">
        <div class="container">
            <div class="row">
                <!-- .row start -->
                <div class="col-md-6">
                    <!-- col-md-6 start here -->
                    <h1>Portfolio</h1>
                </div>
                <!-- col-md-6 end here -->
                <div class="col-md-6 text-right">
                    <!-- col-md-6 start here -->
                    <ul class="breadcrumb">
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="#">Portfolio</a>
                        </li>
                        <li class="active">Portfolio 2 columns</li>
                    </ul>
                </div>
                <!-- col-md-6 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- SECTION END -->
    <!-- SECTION START PORTFOLIO -->
    <section class="portfolio portfolio-2-columns white-bg">
        <div class="container">
            <!-- .container -->
            <div class="tabs">
                <!-- Start tabs -->
                <ul class="nav nav-tabs nav-justified">
                    <li class="active">
                        <a class="filter" href="#" data-toggle="tab" data-filter="all"> All</a>
                    </li>
                    <li>
                        <a class="filter" href="#" data-toggle="tab" data-filter=".person" data-type="person"> Persons</a>
                    </li>
                    <li>
                        <a class="filter" href="#" data-toggle="tab" data-filter=".animals" data-type="animals"> Animals</a>
                    </li>
                    <li>
                        <a class="filter" href="#" data-toggle="tab" data-filter=".nature" data-type="nature"> Nature</a>
                    </li>
                    <li>
                        <a class="filter" href="#" data-toggle="tab" data-filter=".other" data-type="other"> Others</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- / .container -->
        <div class="projects relative ovh">
            <div class="img-holder mix other">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project1.jpg" alt="project1">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix person">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project2.jpg" alt="project2">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix other">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project3.jpg" alt="project3">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix nature">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project4.jpg" alt="project4">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix person">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project5.jpg" alt="project5">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix nature">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project6.jpg" alt="project6">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix animals">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project7.jpg" alt="project7">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix animals">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project8.jpg" alt="project8">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix nature">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project9.jpg" alt="project9">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix person">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project10.jpg" alt="project10">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix other">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project11.jpg" alt="project11">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
            <div class="img-holder mix person">
                <!-- col-md-3 start here -->
                <div class="bg-img-holder">
                    <img src="~/img/projects/project12.jpg" alt="project12">
                </div>
                <div class="img-hover text-center">
                    <a href="portfolio-item.html">
                        <div class="img-hover-content">
                            <h5>Project Description</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
            <!-- col-md-3 end here -->
        </div>
        <!-- / .projects -->
    </section>
    <!-- SECTION END -->
</div>
<!-- / #content -->

@section JavascriptSection{
<script src="~/plugins/ui/mixitup/jquery.mixitup.js"></script>
<script src="~/js/pages/portfolio.js"></script>
}